import React,{useRef,useState} from 'react';
import { connect } from 'umi';
import RightContainer from '@/components/RightContainer';
import ProForm, {
  StepsForm,
  ProFormText,
  ProFormDatePicker,
  ProFormSelect,
  ProFormTextArea,
  ProFormCheckbox,
  ProFormDateRangePicker,
  ProFormUploadButton,
} from '@ant-design/pro-form';
import { message ,Upload,Cascader } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import './index.less' ;
const searchOptions = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];

const waitTime = (time = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};
const index = (props) => {
  const formRef = useRef();
  const [imageUrl, setimageUrl] = useState('');
  const [loading, setloading] = useState(false);
  const selectOnChange = ()=>{};
  // 拦截文件上传
  const beforeUploadHandle=(file)=>{
      this.setState(({fileData})=>({
          fileData:[...fileData,file],
      }))
      return false;
  }
  const handleChange = ()=>{

  }
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  );
  return (
    <RightContainer>
      <StepsForm
        formRef={formRef}
        onFinish={async () => {
          await waitTime(1000);
          message.success('提交成功');
        }}
        formProps={{
          validateMessages: {
            required: '此项为必填项',
          },
        }}
      >
        <StepsForm.StepForm
          name="base"
          title="商品信息"
          onFinish={async () => {
            console.log(formRef.current?.getFieldsValue());
            await waitTime(2000);
            return true;
          }}
        >
          <ProForm.Group>
            <ProFormText
              name="name"
              label="商品名称"
              width="md"
              placeholder="请输入商品名称"
              rules={[{ required: true }]}
            />
            <ProForm.Item label="商品分类" rules={[{required:true,message: 'Please input your password!'}]}>
              <Cascader options={searchOptions} onChange={selectOnChange} placeholder="Please select" />
            </ProForm.Item>
            
          </ProForm.Group>
          <ProForm.Group>
            <ProFormText
                name="keyword"
                label="商品关键字"
                width="md"
                placeholder="请输入商品关键字"
                rules={[{ required: true }]}
              />
              <ProFormText
                name="size"
                label="单位"
                width="md"
                placeholder="请输入单位"
                rules={[{ required: true }]}
              />
          </ProForm.Group>
          <ProForm.Group>
              <ProFormTextArea name="remark" label="商品简介" width="md" placeholder="请输入商品简介" />
              <ProFormUploadButton
                name="goods_img"
                label="商品封面图"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                beforeUpload={beforeUploadHandle}
                onChange={handleChange}
                showUploadList={false}
                rules={[{ required: true }]}
              >
                {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
            </ProFormUploadButton>
          </ProForm.Group>
          <ProForm.Group>
              <ProFormUploadButton
                name="goods_swiper"
                label="商品轮播图"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                beforeUpload={beforeUploadHandle}
                onChange={handleChange}
                rules={[{ required: true }]}
              >
                {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
            </ProFormUploadButton>
          </ProForm.Group>
        </StepsForm.StepForm>
        <StepsForm.StepForm
          name="checkbox"
          title="商品详情"
          onFinish={async () => {
            console.log(formRef.current?.getFieldsValue());
            return true;
          }}
        >
          <ProFormCheckbox.Group
            name="checkbox"
            label="迁移类型"
            width="lg"
            options={['结构迁移', '全量迁移', '增量迁移', '全量校验']}
          />
          <ProForm.Group>
            <ProFormText name="dbname" label="业务 DB 用户名" />
            <ProFormDatePicker name="datetime" label="记录保存时间" width="sm" />
            <ProFormCheckbox.Group
              name="checkbox"
              label="迁移类型"
              options={['完整 LOB', '不同步 LOB', '受限制 LOB']}
            />
          </ProForm.Group>
        </StepsForm.StepForm>
        <StepsForm.StepForm
          name="otherSet"
          title="其他设置"
          onFinish={async () => {
            console.log(formRef.current?.getFieldsValue());
            return true;
          }}
        >
          <ProFormCheckbox.Group
            name="checkbox"
            label="迁移类型"
            width="lg"
            options={['结构迁移', '全量迁移', '增量迁移', '全量校验']}
          />
          <ProForm.Group>
            <ProFormText name="dbname" label="业务 DB 用户名" />
            <ProFormDatePicker name="datetime" label="记录保存时间" width="sm" />
            <ProFormCheckbox.Group
              name="checkbox"
              label="迁移类型"
              options={['完整 LOB', '不同步 LOB', '受限制 LOB']}
            />
          </ProForm.Group>
        </StepsForm.StepForm>
        <StepsForm.StepForm
          name="time"
          title="规格设置"
        >
          <ProFormCheckbox.Group
            name="checkbox"
            label="部署单元"
            rules={[
              {
                required: true,
              },
            ]}
            options={['部署单元1', '部署单元2', '部署单元3']}
          />
          <ProFormSelect
            label="部署分组策略"
            name="remark"
            rules={[
              {
                required: true,
              },
            ]}
            initialValue="1"
            options={[
              {
                value: '1',
                label: '策略一',
              },
              { value: '2', label: '策略二' },
            ]}
          />
          <ProFormSelect
            label="Pod 调度策略"
            name="remark2"
            initialValue="2"
            options={[
              {
                value: '1',
                label: '策略一',
              },
              { value: '2', label: '策略二' },
            ]}
          />
        </StepsForm.StepForm>
      </StepsForm>
    </RightContainer>
  );
};
export default connect()(index);
